<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <link rel="stylesheet" href="css/chat.css">
	<script src="js/jquery-3.6.1.js"></script>
</head>
<body>
<section id="chat">
    <div class="chatBody"></div>
    <div><img src="img/icon.jpg"></div>
    <textarea class="chatText"></textarea>
    <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script>
        $(function(){
            var $imgs=new Array("img/head01.jpg","img/head02.jpg","img/head03.jpg");
            var $name=new Array("虎头怪","绿毛龟","刀哥");
            $("#send").click(function(){
                var $people = parseInt(Math.random() * 3);
                var $text =$(".chatText").val();
                if($text.length==""){
                    return;
                }else{
                    var $currentstr=$(".chatBody").append("<div><img  src='"+$imgs[$people]+"'/> "
					+$name[$people]+"<br/><p >"+$text+"</p></div>");
                    $(".chatBody p").addClass("a");
                    $("textarea").val("");
                }
            });
        });
		
    </script>
</body>
</html>